<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

</head>

<body>

    <div id="app"></div>

    <!-- 父组件 -->
    <template id="one">
        <two>
            <!-- 使用标签里面的内容，会被组件模版中的slot标签替换 -->
            <p>这是一些内容1。</p>
            <p>这是一些内容2。</p>
        </two>
    </template>

    <!-- 子组件 -->
    <template id="two">
        <div>
            <!-- 如果有多个slot标签，内容使用一样的 : 存在多个插槽时会渲染相同内容 -->
            <!-- 如果slot 中有默认值，如果组件被使用时，没有内容传递过来，就显示默认信息 -->
            <slot></slot>
            <slot></slot>
            <slot> <i>我是默认信息</i></slot>
            
        </div>
    </template>

</body>
<script>

    /**
     * 插槽的主要作用，就是在父标签中写的html内容，能够传递给组件本身。
     * 
     * 匿名插槽：子组件使用<slot></slot>标签定义一个插槽，
     * 父组件在子组件标签内添加的所有内容都会插入到这个位置。
     * */
    let config = {
        template:'#one',
        components: {
            'two':{template:'#two'}
        }
    }
    Vue.createApp(config).mount('#app');

</script>

</html>